<template>
	<view class="content">
		
		<!-- 使用view标签，而不是采用html标签，是为了能够适配app和小程序 -->
		<view class="out">
			
		</view>
		<icon type="success"></icon>
		<view class="uniapp">uniapp view标签类似于div</view>
		<!-- text标签中的内容默认不可被选中 -->
		<text class="uniapp" >uniapp text类似于span标签</text>
		<text space="nbsp" decode>vue  js</text>
		
		<scroll-view class="scroll" scroll-x scroll-y>
			<view class="group">
				<view class="item" v-for="item in 5">
					1111
				</view>
			</view>
		</scroll-view>
		
		<swiper class="swiper" 
		circular autoplay interval="3000" 
		duration="400" indicator-dots 
		indicator-active-color="white">
			<swiper-item class="swiper-item" v-for="(item, index) in bannerUrl.length">
			<image :src="bannerUrl[index]" mode="aspectFill" alt="" />
			</swiper-item>
		</swiper>
		
		<img src="/static/images/image1.jpg" alt="" />
		<br />
		<image class="my_image" 
		mode="aspectFill"
		src="/static/images/image1.jpg" 
		alt="" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello3333',
				bannerUrl: [
					'/static/images/image1.jpg',
					'/static/images/image2.jpg',
					// '/static/images/image3.jpg',
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		.out {
		width: 300rpx; // rpx: responsive pixel 响应式像素，可以根据不同分辨率的设备进行自适应
		height: 300rpx;
		background-color: skyblue;
		}
	}
	.scroll {
		border: 1px solid red;
		box-sizing: border-box; // 元素的实际占用宽度 = 设置的 width，不会因 padding 或 border 而撑大
		height: 200rpx;
		.group {
			white-space: nowrap;
		.item {
			width: 200rpx;
			height: 200rpx;
			background-color: pink;
			display: inline-block;
			margin: 0 10rpx 0 0;
		}
		}
	}

.swiper {
	height: 500rpx;
	margin-top: 100rpx;
	.swiper-item {
		padding: 0 10px;
		box-sizing: border-box;
		image {
			width: 100%;
			height: 400rpx;
		}
	}
}
.my_image {
	width: 600rpx;
	height: 600rpx;
}
</style>
